<template>
  <div>
    <el-container>
      <el-header>
        <EL_header></EL_header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <EL_aside></EL_aside>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-footer>
        <EL_footer></EL_footer>
      </el-footer>
    </el-container>
  </div>
</template>
<!-- 被<el-submenu> 包裹的 <el-menu-item-group> 和 <el-menu-item>存在自动补充直接父级ul,三者都是被解析成li,而后来者自身为li>ul>li-->
<script>
    //header
    import EL_header from "../container/EL_header.vue";
    //footer
    import EL_footer from "../container/EL_footer.vue";
    //aside
    import EL_aside from "../container/EL_aside.vue";
    export default {
        components: {
            EL_header,
            EL_footer,
            EL_aside
        }
    };
</script>

<style>
    * {
        margin: 0px;
    }
    
    .el-main {
        background-color: #e9eef3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
    
    body>.el-container {
        margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
<!-- slot问题 -->
<!-- template和span区别问题 -->
<!-- no_info方法中$router就需要this了 -->